import { NavBar, DatePicker } from 'antd-mobile'
import { useEffect, useMemo, useState } from 'react'
import './index.scss'

import _ from 'lodash'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import DailyBill from './components'
import { object } from 'prop-types'

const Month = () => {
const[dateVisible,setDateVisible] =useState(false)
const[currentDate,setCurrentDate] = useState(
  ()=>{return dayjs(new Date()).format('YYYY-MM')}

)
const [currentMonthList,setCurrentMonthList] = useState([])
const billList=useSelector(state=>state.bill.billList)
const monthGroup=useMemo(()=>{
return _.groupBy(billList,item=>dayjs(item.date).format('YYYY-MM'))

},[billList])
console.log(monthGroup) 
const monthResult=useMemo(()=>{
  //收入、支出、结余
  const income=currentMonthList.filter(item=>item.type=='income').reduce((a,c)=>a+c.money,0)
  const pay=currentMonthList.filter(item=>item.type=='pay').reduce((a,c)=>a+c.money,0)
 return {pay,income,total:pay+income}

},[currentMonthList])
//初始化的时候，显示当月数据
useEffect(()=>{
const nowDate=dayjs(new Date()).format('YYYY-MM')
//边界值控制
if(monthGroup[nowDate])
{setCurrentMonthList(monthGroup[nowDate])}

},[monthGroup]) 


const onConfirm=(date) => {
setDateVisible(false)
const formatDate=dayjs(date).format('YYYY-MM')
setCurrentDate(formatDate)
setCurrentMonthList(monthGroup[formatDate])
}
//当前月按照日来分组
const dayGroup=useMemo(()=>{
  const groupDate=_.groupBy(currentMonthList,(item)=>dayjs(item.date).format('YYYY-MM-DD'))
  // const groupDate=_.groupBy(billList,item=>dayjs(item.date).format('YYYY-MM'))
  const keys=Object.keys(groupDate)
  return{
    groupDate,keys
  }
},[currentMonthList])

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" >
            <span className="text" onClick={()=>setDateVisible(true)}>
           {currentDate+''}月账单
            </span>
            {/* 思路：根据当前弹框打开的状态控制expand类名是否存在 */}
            <span className={classNames('arrow',dateVisible&&'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{monthResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateVisible}
            onCancel={()=>setDateVisible(false)}
            onConfirm={onConfirm}
            onClose={()=>setDateVisible(false)}
            max={new Date()}
          />
        </div>
        {/* //单日列表统计 */}
        {
          dayGroup.keys.map(key=>{

            return <DailyBill key={key} date={key} billList={dayGroup.groupDate[key]}></DailyBill>
          })
        }
        
      </div>
    </div >
  )
}

export default Month